<template>
	<view style="width:100%;height:100rpx;"></view>
	<view class="space-between buttom" style="height:112rpx;">
		<view class="center" style="font-size: 26rpx;" @click="box()">
			<view>合计：</view>
			<view>
				<view>
					蓝宝石：<text style="font-size: 36rpx;color:#5097FB;">{{gemMoney}}</text>
				</view>
				<view>
					钱包价格：<text style="font-size: 24rpx;">￥</text><text style="font-size: 36rpx;">{{moneyMoney}}</text>
				</view>
			</view>
		</view>
		<view class="pay" @click="moneyNum||gemNum?payfor():box()">{{moneyNum||gemNum?'去支付':'去购买'}}</view>
	</view>
	<uni-popup ref="pop" type="bottom" @change="change">
		<view class="package_sale" style="padding:10rpx 0px;border-radius: 30rpx 30rpx 0px 0px;margin:0px;">
			<view style="margin:20rpx 0px 0rpx 20rpx;">选择购买方式</view>
			<view class="package_sale" style="margin: 0px;padding:20rpx;">
				<view class="space-between">
					<view style="font-size: 26rpx;color:#5097FB;">
						蓝宝石：<text style="font-size: 36rpx;">{{orderAll.score}}</text>
					</view>
					<view class="center num">
						<text style="border: 1px solid #1B91FF;" v-if="gemNum" @click="carDeatil(1,'gem')">-</text>
						<text v-if="gemNum">{{gemNum}}</text>
						<text style="background: linear-gradient(-66deg, #4E96FB, #65A6FB);"
							@click="carDeatil(2,'gem')">+</text>
					</view>
				</view>
				<view class="space-between" style="margin-top:20rpx;">
					<view style="font-size: 26rpx;color: #FE412C;">
						钱包价格：<text style="font-size: 24rpx;">￥</text><text
							style="font-size: 36rpx;">{{orderAll.price}}</text>
					</view>
					<view class="center num">
						<text v-if="moneyNum" @click="carDeatil(1,'money')">-</text>
						<text v-if="moneyNum">{{moneyNum}}</text>
						<text @click="carDeatil(2,'money')">+</text>
					</view>
				</view>
			</view>
		</view>
		<view style="width:100%;height:112rpx;"></view>
	</uni-popup>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { navTo } from '@/utils/navigator';
	import { errorToast, successToast, showLoading } from '@/utils/prompt';
	import { toPublish } from '@mqtt';
	import { getDriverID } from '@/stores/driverID';
	const driver_id = getDriverID();
	const emit = defineEmits(['submit']);
	const props = defineProps({
		orderAll: {
			type: Object,
		}
	});
	const gemNum = ref(0)
	const moneyNum = ref(0)
	const gemMoney = ref(0)
	const moneyMoney = ref(0)
	const distor = ref(false)
	const pop = ref(null)
	function init() {
		console.log(JSON.stringify(props.orderAll) + '-------')
		gemNum.value = props.orderAll.cart_gem_nums
		moneyNum.value = props.orderAll.cart_money_nums
		gemMoney.value = Math.round((props.orderAll.score * gemNum.value) * 100) / 100
		moneyMoney.value = Math.round((props.orderAll.price * moneyNum.value) * 100) / 100
	}
	// 增加商品数量
	function add(num : string) {
		switch (num) {
			case 'gem':
				gemNum.value++
				gemMoney.value = Math.round((props.orderAll.score * gemNum.value) * 100) / 100
				break;
			case 'money':
				moneyNum.value++
				moneyMoney.value = Math.round((props.orderAll.price * moneyNum.value) * 100) / 100
				break;
		}
	}
	// 减少商品数量
	function decrease(num : string) {
		switch (num) {
			case 'gem':
				gemNum.value--
				gemMoney.value = Math.round((props.orderAll.score * gemNum.value) * 100) / 100
				break;
			case 'money':
				moneyNum.value--
				moneyMoney.value = Math.round((props.orderAll.price * moneyNum.value) * 100) / 100
				break;
		}
	}
	// 购物车调整
	function carDeatil(num : number, type : string) {
		showLoading()
		const payload = {
			driver_id,
			goods_id: props.orderAll.id,
			type: type
		};
		const topic = num === 1 ? 'score/jianCart' : 'score/addCart'
		toPublish(topic,
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { code, msg } = obj;
				if (code === 1) {
					if (num === 1) {
						decrease(type)
					} else {
						add(type)
					}
				} else {
					errorToast(msg)
				}
			}
		);
	}
	function change(e : any) {
		distor.value = e.show
	}
	function box() {
		if (!distor.value) {
			pop.value.open()
		} else {
			pop.value.close()
		}
		console.log(distor.value)
	}
	//提交支付
	function payfor() {
		showLoading();
		const payload = {
			goods_id: Number(props.orderAll.id),
			driver_id,
		};
		toPublish('score/addOrderByInfo', payload, (obj : any) => {
			const { code, msg, data } = obj;
			if (code === 1) {
				successToast(msg);
				setTimeout(() => {
					pop.value.close()
					emit('submit')
					navTo('gemstone/payFor?id=' + data.order_id)
				}, 1000)
			} else {
				errorToast(msg);
			}
		});
	}
	defineExpose({ init });
</script>

<style scoped lang="less">
	.buttom {
		width: 100%;
		position: fixed;
		bottom: 0px;
		left: 0px;
		background: #FFFFFF;
		z-index: 9999;
		height: 112rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.pay {
		width: 259rpx;
		height: 112rpx;
		background: linear-gradient(-66deg, #FF7B48, #FF5B45);
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 112rpx;
	}

	image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 5px;
	}

	.title {
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.num {
		text:nth-child(odd) {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 48rpx;
			box-sizing: border-box;
		}

		text:nth-last-child(3) {
			border: 1px solid #FF5700;
		}

		text:nth-of-type(2) {
			width: 50rpx;
			text-align: center;
		}

		text:nth-last-child(1) {
			background: linear-gradient(-66deg, #FF5700, #FE0000);
			color: #fff;
		}
	}
</style>